import React from "react";
import { NavBar, Space, Toast, Button } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { PictureWrongOutline } from "antd-mobile-icons";
import {
  Form,
  Input,
} from 'antd-mobile'
function Index() {
  const navigate = useNavigate();
  const back = () => navigate("/home");

  
  return (
    <div>
      <div>
        <NavBar onBack={back}>新增乘客</NavBar>
      </div>

      <div>
        <Button fill="outline" block color="primary" size="large">
        <PictureWrongOutline /> 扫描证件添加
      </Button>
      </div>
      
      <Form
        name='form'
        footer={
          <Button block type='submit' color='primary' size='large'>
            提交
          </Button>
        }
      >
        <Form.Item
          name='name'
          label='乘车类型'
          rules={[{ required: true, message: '姓名不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入乘车类型' />
        </Form.Item>

         <Form.Item
          name='name1'
          label='姓名'
          rules={[{ required: true, message: '姓名不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入姓名' />
        </Form.Item>

         <Form.Item
          name='name2'
          label='证件类型'
          rules={[{ required: true, message: '姓名不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入证件类型' />
        </Form.Item>

         <Form.Item
          name='name3'
          label='证件号码'
          rules={[{ required: true, message: '姓名不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入证件号码' />
        </Form.Item>

         <Form.Item
          name='name4'
          label='手机号码'
          rules={[{ required: true, message: '姓名不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入手机号' />
        </Form.Item>


      </Form>

     
    </div>
  );
}

export default Index;
